import React, {PureComponent} from 'react';

import CommentInput from './components/CommentInput';
import CommentItem from './components/CommentItem';

export default class App extends PureComponent {
    constructor(props) {
        super(props);
         
        this.state = {
            commentList: []
        }
    }

    render() {
        return (
            <div style={{width: "600px", padding: "20px"}}>
                {
                    this.state.commentList.map((item, index) => {
                        return <CommentItem key={item.id} comment={item} 
                        removeItem={e => this.removeComment(index)}/>
                    })
                }

                
                <CommentInput submitComment={this.submitComment.bind(this)}/>
            </div>
        )
    }
    // 子传父 自定义事件 把submitComment函数传递到子组件
    //父组件向子组件传入函数 子组件通过props获取
    //子组件接收父组件传入的函数 调用函数 把数据传给父组件 

    submitComment(info) {
        this.setState({
            commentList: [...this.state.commentList, info]
        })
    }

    removeComment(index) {
        const newCommentList = [...this.state.commentList];
        newCommentList.splice(index, 1);
        this.setState({
            commentList: newCommentList
        })
    }
}